<template>
  <div v-loading="loading" class="entrustInformation">
    <div class="title-button">
      <el-button v-if="!isDisabled" type="primary" size="mini" :loading="savaLoading" @click="sava">保 存</el-button>
      <el-button v-if="!isDisabled" type="primary" size="mini" :loading="submitLoading" @click="submit">提交委托</el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-if="formDate.pricing&&formDate.pricing.length" name="offerInfo" label="报价信息">
        <offerInfo :form-date="formDate" :options="options" />
      </el-tab-pane>

      <el-tab-pane name="categories" label="维护类目">
        <categories :form-date="formDate" :options="options" :is-disabled="isDisabled" />
      </el-tab-pane>

      <el-tab-pane v-if="formDate.sellPoints&&formDate.sellPoints.length" name="sellPoints" label="维护卖点">
        <sellPoints :form-date="formDate" :is-disabled="isDisabled" />
      </el-tab-pane>

      <el-tab-pane v-if="formDate.marks&&formDate.marks.length" name="marks" label="标记付款/寄样">
        <marks :form-date="formDate" :is-disabled="isDisabled" />
      </el-tab-pane>

      <el-tab-pane v-if="formDate.assets&&formDate.assets.length" name="assets" label="上传图片/文描">
        <assets ref="assetsRef" :form-date="formDate" :is-disabled="isDisabled" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import offerInfo from '../components/offerInfo.vue'
import categories from '../components/categories.vue'
import sellPoints from '../components/sellPoints.vue'
import marks from '../components/marks.vue'
import assets from '../components/assets.vue'
import { building, queryTreeList, queryChannelTreeList, saveBuilding, submit } from '@/api/coi/onlineTaskAPI/sku'
import bus from '@/utils/eventBus.js'

export default {
  name: 'EntrustInformation',
  components: {
    offerInfo,
    categories,
    sellPoints,
    marks,
    assets
  },
  data() {
    return {
      isDisabled: this.$route.params.type === 'review',
      idList: this.$route.params.idList,
      loading: false,
      activeName: 'offerInfo',
      formDate: {
        assets: [],
        categories: [],
        marks: [],
        sellPoints: [],
        pricing: []
      },
      options: {},
      savaLoading: false,
      submitLoading: false
    }
  },
  created() {
    this.idList = this.$route.params.idList
    this.queryData()
  },
  mounted() {
    bus.$on('loadingChange', (status) => {
      this.loading = status
    })
  },
  methods: {
    async queryData() {
      try {
        this.loading = true
        const params = { id: this.idList }
        const { result } = await building(params)
        if (result) {
          this.queryOptions(result)
          this.formDate = result
          if (!Array.isArray(this.formDate.pricing) || !this.formDate.pricing.length) this.activeName = 'categories'
        }
      } finally {
        this.loading = false
      }
    },
    // 数组去重
    unique(arr) {
      return Array.from(new Set(arr))
    },
    queryOptions(result) {
      if (!result.categories && !result.categories.elements) return
      const shopArr = []
      const platformArr = []
      result.pricing = result.pricing.filter(_ => !_.pbVendorFlag && _.directImportFlag && _.buildVendorNbr !== '382575')
      result.sellPoints = result.sellPoints.filter((item) => item.creationWay === 2 || item.creationWay === 4) // 卖点
      result.marks = result.marks.filter((item) => (item.creationWay !== 4 && item.directImportFlag !== 1) || (item.creationWay !== 4 && item.pbVendorFlag !== 1)) // 卖点
      result.assets = result.assets.filter((item) => item.creationWay === 3 || item.creationWay === 4) // 素材图||详情页
      result.categories.forEach(element => {
        element.elements.forEach((item) => {
          if (item.shopCategoryFlag === 0) item.values = item.values.length ? item.values[0] : []
          item.shopCategoryFlag ? shopArr.push(item.channelId) : platformArr.push(item.channelId)
        })
      })
      this.unique(shopArr).forEach(async (channelId) => {
        const res = await queryTreeList({ channelId })
        this.$set(this.options, `${channelId}1`, res.result)
      })
      this.unique(platformArr).forEach(async (channelId) => {
        const res = await queryChannelTreeList({ channelId })
        this.$set(this.options, `${channelId}0`, res.result)
      })
    },
    createBody(src) {
      console.log(1)
      return `<div style="padding-bottom: 1px;"><img src="${src}" style="width: 100%;max-width: 750px;"></div>`
    },
    async sava(messageShow = true) {
      const _this = this
      try {
        this.savaLoading = true
        const data = JSON.parse(JSON.stringify(this.formDate))
        delete data.pricing
        data.categories.forEach(categorie => {
          categorie.elements.forEach((item) => {
            if (item.shopCategoryFlag === 0) item.values = item.values.length ? [item.values] : []
          })
        })
        data.assets.forEach(item => {
          if (item.skuContentResources) {
            if (Array.isArray(item.skuContentResources)) {
              const arrsRCDOM = item.skuContentResources.map(item => _this.createBody(item.resourceUrl))
              const DomString = arrsRCDOM.join('')
              item.content = `<div>${DomString}</div>`
            }
          }
        })
        const { result } = await saveBuilding(data)
        if (result) if (messageShow) this.$message({ message: '保存成功!', type: 'success' })
      } finally {
        this.savaLoading = false
      }
    },
    submit() {
      const _this = this
      this.$confirm('提交补充委托信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.requestSubmit()
      }).catch(() => {
      })
    },
    async requestSubmit() {
      try {
        this.submitLoading = true
        await this.sava(false)
        const { result } = await submit(this.$route.params.idList.split(','))
        if (result) {
          this.$message({ type: 'success', message: '提交委托成功!' })
          bus.$emit('closeTag', this.$route)
        }
      } finally {
        this.submitLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__content{
  height: calc(100vh - 120px);
  overflow: auto;
  &::-webkit-scrollbar{
    width: 5px;
  }
}
.entrustInformation{
  padding: 12px;
  .title-button{
    position: absolute;
    right: 20px;
    z-index: 999;
  }
  .el-tabs{
    height: 100%;
  }
}
</style>
